<template>
    <div class="left-menu-container">
        <div class="left-menu-title">{{ COMPONENTS_LEFT_MENU.title }}</div>
        <div class="left-menu-group" v-for="(item, index) in COMPONENTS_LEFT_MENU.children" :key="index">
            <div class="left-menu-label">
                <span>{{ item.label }}</span>
            </div>
            <ul>
                <div class="left-menu-item" v-for="(childItem, childIndex) in item.children" :key="childIndex">
                    <span>{{ childItem.label }}</span>
                    <span class="chinese">{{ childItem.chinese }}</span>
                </div>
            </ul>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { COMPONENTS_LEFT_MENU } from '../../assets/constant/project.ts';
</script>

<style lang="scss" scoped>
.left-menu-container {
    --left-menu-height-default: 40px;
    --left-menu-padding-left: 40px;
    --left-menu-padding-right: 12px;

    --left-menu-border-color: var(--border-color-default);
    --left-menu-label-color: var(--color-gray-6);

    --left-menu-active-bg: var(--color-blue-1);
    --left-menu-item-border-radius: var(--border-radius-large);

    @include flex.flex(1);
    height: 100%;
    border-right: var(--border-width-default) var(--border-style-solid) var(--left-menu-border-color);
    box-sizing: border-box;

    .left-menu-title,
    .left-menu-label,
    .left-menu-item {
        @include flex.display-flex;
        align-items: center;
        width: 100%;
        height: var(--left-menu-height-default);
        padding: 0 var(--left-menu-padding-right) 0 var(--left-menu-padding-left);
        box-sizing: border-box;
    }

    .left-menu-label {
        color: var(--text-color-secondary);

        span {
            @include flex.display-flex;
            align-items: center;
            width: 100%;
            height: 100%;
            border-bottom: var(--border-width-default) var(--border-style-solid) var(--left-menu-border-color);
        }
    }

    .left-menu-item {
        @include flex.display-flex;
        align-items: center;
        cursor: pointer;

        .chinese {
            font-size: 12px;
            margin-left: 6px;
            color: var(--text-color-secondary);
        }

        &:hover,
        &.hover,
        &:focus,
        &.focus {
            background-color: var(--left-menu-active-bg);
            color: var(--color-primary-hover);
            border-radius: var(--left-menu-item-border-radius);

            .chinese {
                color: var(--color-primary-hover);
            }
        }
    }
}
</style>
